<template>
  <div>
    <el-row class="jobSearch">
      <el-col :span="4" >
        <el-cascader :options="options"  v-model="jobCategoryName" :props="props" clearable	 :show-all-levels="false" placeholder="职位类型"></el-cascader>
      </el-col>
      <el-col :span="20" class="center">
        <el-input
            v-model="search"
            @focus="focus"
            @blur="blur"
            @keyup.enter.native="searchHandler"
            placeholder="搜索职位"
        >
          <el-button slot="append" icon="el-icon-search" style="width:150px;" id="search" @click="searchHandler">搜索</el-button>
        </el-input>
        <!---设置z-index优先级,防止被走马灯效果遮挡-->
        <el-card
            @mouseenter="enterSearchBoxHanlder"
            v-if="isSearch"
            class="box-card"
            id="search-box"
            style="position:absolute;z-index:10000;width:692px"
        >
          <dl v-if="isHistorySearch" style="margin:0;">
            <dt class="search-title" v-show="history">历史搜索</dt>
            <dt class="remove-history" v-show="history" @click="removeAllHistory">
              <i class="el-icon-delete"></i>清空历史记录
            </dt>
            <div style="text-align: left;">
              <el-tag
                  v-for="search in historySearchList"
                  :key="search.id"
                  closable
                  :type="search.type"
                  @close="closeHandler(search)"
                  style="margin-right:5px; margin-bottom:5px;cursor: pointer"
              >{{search.name}}</el-tag>
            </div>
            <dt class="search-title">热门搜索</dt>
            <div style="text-align: left;">
              <el-tag
                  v-for="search in hotSearchList"
                  :key="search.id"
                  type="warning"
                  style="margin-right:5px; margin-bottom:5px;width:80px;text-align:center;cursor: pointer "
              >{{search}}</el-tag>
            </div>
          </dl>
          <dl v-if="isSearchList">
            <div style="text-align: left;height:30px;margin-bottom: 4px"  v-for="search in searchList" :key="search.id">
              <el-tag type="info"   style="width:100%; cursor: pointer">{{search}}</el-tag>
            </div>
          </dl>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="height: 20px">
      <p class="hotCity"><span class="hotC">热门城市：</span> <el-tag size="mini" type="primary" effect="dark">北京</el-tag>
       <span class="selCity" style="margin-left: 20px"><el-link :underline="false">全国</el-link></span>
        <span class="selCity"> <el-link :underline="false">北京</el-link></span>
         <span class="selCity"> <el-link :underline="false">上海</el-link></span>
         <span class="selCity"> <el-link :underline="false">广州</el-link></span>
         <span class="selCity"> <el-link :underline="false">深圳</el-link></span>
        <span class="selCity"> <el-link :underline="false">杭州</el-link></span>
         <span class="selCity"> <el-link :underline="false">西安</el-link></span>
         <span class="selCity"> <el-link :underline="false">武汉</el-link></span>
         <span class="selCity"> <el-link :underline="false">天津</el-link></span>
         <span class="selCity"> <el-link :underline="false">厦门</el-link></span>
         <span class="selCity"> <el-link :underline="false">苏州</el-link></span>
         <span class="selCity"> <el-link :underline="false">成都</el-link></span>
         <span class="selCity"> <el-link :underline="false">重庆</el-link></span>
      </p>
      <el-divider direction="horizontal"></el-divider>
      <p class="filter" style="margin:0">
        <el-cascader :options="list" size="small" placeholder="招聘类型" clearable></el-cascader>
        <el-cascader :options="list" size="small" placeholder="工作经验" clearable></el-cascader>
        <el-cascader :options="list" size="small" placeholder="学历要求" clearable></el-cascader>
        <el-cascader :options="list" size="small" placeholder="薪资要求" clearable></el-cascader>
        <el-cascader :options="list" size="small" placeholder="工作形式" clearable></el-cascader>
        <el-cascader :options="list" size="small" placeholder="公司类型" clearable></el-cascader>
        <el-cascader :options="list" size="small" placeholder="公司规模" clearable></el-cascader>
        <el-cascader :options="list" size="small" placeholder="更多城市" clearable></el-cascader>
        <el-link :underline="false">清空筛选条件</el-link>
      </p>
    </el-row>
  </div>
</template>

<script>
import RandomUtil from "../../utils/randomUtil";
import Store from "../../utils/jobStore";
import JobCategoryList from "../../utils/jobCategoryList"
import eventBus from "@/assets/js/eventBus";
export default {
  name:'JobSearch',
  data() {
    return {
      search: "", //当前输入框的值
      isFocus: false, //是否聚焦
      hotSearchList: ['java开发','前端开发','项目经历','阿里巴巴','百度','腾讯'], //热门搜索数据
      historySearchList: [], //历史搜索数据
      searchList: ['java开发','前端开发',], //搜索返回数据,
      history: false,
      types: ["", "success", "info", "warning", "danger"], //搜索历史tag式样
      options:JobCategoryList,
      props:{
        label:'jobCategoryName',
        value:'jobCategoryName',
        children:'childCategory'
      },
      value: '搜索类型',
      jobCategoryName:'',
      list:[{
        value: '选项1',
        label: '职位',
        child: [{
          value: 'shejiyuanze',
          label: '设计原则',
        }]}],
    }
  },
  methods: {
    focus() {
      this.isFocus = true;
      this.historySearchList =
          Store.loadHistory() == null ? [] : Store.loadHistory();
      this.history = this.historySearchList.length == 0 ? false : true;
    },
    blur() {
      var self = this;
      this.searchBoxTimeout = setTimeout(function() {
        self.isFocus = false;
      }, 300);
    },
    enterSearchBoxHanlder() {
      clearTimeout(this.searchBoxTimeout);
    },
    searchHandler() {
      //随机生成搜索历史tag式样
      eventBus.$emit("sendByBus",this.search);
      let n = RandomUtil.getRandomNumber(0, 5);
      let exist =
          this.historySearchList.filter(value => {
            return value.name == this.search;
          }).length !== 0;
      if (!exist&&this.search!='') {
        this.historySearchList.push({ name: this.search, type: this.types[n] });
        Store.saveHistory(this.historySearchList);
      }
      this.history = this.historySearchList.length !== 0;
    },
    closeHandler(search) {
      this.historySearchList.splice(this.historySearchList.indexOf(search), 1);
      Store.saveHistory(this.historySearchList);
      clearTimeout(this.searchBoxTimeout);
      if (this.historySearchList.length === 0) {
        this.history = false;
      }
    },
    removeAllHistory() {
      Store.removeAllHistory();
    }
  },
  computed: {
    isHistorySearch() {
      return this.isFocus && !this.search;
    },
    isSearchList() {
      return this.isFocus && this.search;
    },
    isSearch() {
      return this.isFocus;
    }
  }
};
</script>

<style scoped>
#search {
  background-color: #428af5;
  border-radius: 0;
  height:50px;
  color:white;
  font-size:18px;
}

.search-title {
  color: #bdbaba;
  text-align: left;
  font-size: 15px;
  margin-bottom: 5px;
}
.remove-history {
  color: #bdbaba;
  font-size: 15px;
  float: right;
  margin-top: -22px;
  cursor: pointer;
}
/*#search-box {
  width: 555px;
  height: 300px;
  margin-top: 0px;
  padding-bottom: 20px;
}*/
p{
  margin:0;
}
/*#246CD6*/
.jobSearch >>>.el-input__inner {
  height: 50px;
  border-radius: 0;
  border:1px solid #89b7fc;
}
.hotCity{
  margin:0;
  height:50px;
  line-height:50px;
}
.hotCity span{
  display: inline-block;
  font-size:14px;
  color: #414a60;
}
.hotCity .el-tag{
  font-size:13px;
}
.hotCity .el-link{
  font-size:13px;
  vertical-align: top;
}
.selCity{
  display: inline-block;
  margin-left: 30px;
  text-align:left;
  height:50px;
  line-height:50px;
}
.filter{
  height:40px;
  line-height:40px;
}
.filter >>> .el-cascader--small{
  width:80px;
  margin-right:30px;
}
.filter >>> .el-input__inner{
  border:1px solid #FFF;
  padding:0 0;
}
.filter .el-link{
  float:right;
  font-size:13px;
  vertical-align: top;
}
.el-divider--horizontal {
  height: 0.5px;
  margin: 0 0;
}
</style>